'use client';

import React, { useEffect, useState } from 'react';
import {
  Space, Table, Popconfirm, message,
  Button, List,
} from 'antd';
import { HddOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons';

import dayjs from 'dayjs';
import Head from 'next/head';
import { getData, delDeploy } from '../../api/deploy';
import Title from '../components/Title/page';
import AddResource from './add';

const { Item } = List;
const { Meta } = Item;

function App() {
  const [data, setData] = useState([]);
  const refreshData = () => {
    getData().then((res) => {
      console.log('getdata', res);
      setData(res.targets);
    });
  };
  const columns = [
    {
      title: '名称',
      dataIndex: 'alias',
      key: 'alias',
    },
    {
      title: '标识',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '用户组',
      dataIndex: 'project',
      key: 'project',
      render: (text) => <a>{text.name || '-'}</a>,
    },
    {
      title: '所在集群/命名空间',
      dataIndex: 'cluster',
      key: 'cluster',
      render: (text) => (`${text.clusterName}/${text.namespace}`) || '-',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: '260px',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss') || '-',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          {/* <Button icon={<SettingOutlined />} type="text">编辑</Button> */}
          <Popconfirm
            placement="top"
            title="系统提示"
            description="删除操作不可撤销，确认删除吗？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => { delDeploy(record.name).then(() => { message.success('删除成功!'); refreshData(); }); }}
          >
            <Button
              style={{ color: '#f85149' }}
              icon={<DeleteOutlined />}
              type="text"
            >
              移除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  useEffect(() => {
    refreshData();
  }, []);
  return (
    <>
      <Head>
        <title>Index Page</title>
      </Head>
      <Title
        title="部署资源"
        des="关联应用交付运行依赖的云原生集群资源"
        right={
          <AddResource refreshData={refreshData} />
        }
      />
      <Table columns={columns} dataSource={data} rowKey={(row) => row.name} />
    </>
  );
}
export default App;
